<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <link rel="stylesheet" href="../../../static/layui/css/layui.css"
          media="all"/>
    <link rel="stylesheet" href="../../../static/css/public.css" media="all"/>
    <link rel="stylesheet"
          href="../../../static/plugin/zTree/css/zTreeStyle/zTreeStyle.css"
          type="text/css">
</head>
<body class="childrenBody">
<form class="layui-form">
    <blockquote class="layui-elem-quote quoteBox">
        <form class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label" id="chsCount1"></label>
                <label class="layui-input-block">
                    <a class="layui-btn hidden-btn" data-type="reload">对账</a>
                </label>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" id="chsCount2"></label>
                <div class="layui-input-block">
                    <a class="layui-btn layui-btn-normal insert-btn">添加</a>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <select id="chgCp" lay-verify="required" lay-filter="chgCp">
                        <option value="0">全部</option>
                        <option value="1">收入</option>
                        <option value="-1">支出</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" id="allCount"> </label>
                <div class="layui-input-block">
                    <a id="pre-btn" class="layui-btn pre-btn layui-btn-danger" style="display: none;"
                       data-type="reload">《</a>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <select id="cptMth" lay-filter="cptMth"></select>
                </div>
            </div>
            <div class="layui-inline">
                <label> </label>
                <div class="layui-input-block">
                    <a id="next-btn" class="layui-btn next-btn layui-btn-danger" style="display: none;"
                       data-type="reload">》</a>
                </div>
            </div>
        </form>
    </blockquote>

    <table id="list" lay-filter="list"></table>

</form>
<div id="treeDiv" class="menuContent"
     style="display: none; position: absolute; background: white; border: 1px black solid; z-index: 999">
    <ul id="departmentTree" class="ztree"
        style="margin-top: 0; width: 160px;"></ul>
</div>
<script type="text/javascript"
        src="../../../static/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../../../static/layui/layui.js"></script>
<script type="text/javascript"
        src="../../../static/custom/js/common.js"></script>
<script type="text/javascript"
        src="../../../static/plugin/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript">
    let tabDatas;    //全部table中数据
    let incDatas = [];  //table中收入数据
    let outDatas = [];  //table中支出数据
    let countDatas;   //
    let cntRow = 0;    //对账选中多少行
    let sumRow = 0;     //对账选中行合计

    layui.use(['form', 'layer', 'table', 'laytpl'],
        function () {
            let listApi = '../../../accounting/cwCapitals/list';
            let toInsertHtml = 'insert.html';
            let cfmApi = '../../../accounting/cwCapitals/cfm';
            let deleteApi = '../../../accounting/cwCapitals/delete';

            let cols = [[
                {
                    //type : "checkbox",
                    fixed: "left",
                    width: 50,
                    title: '<input type="checkbox" lay-skin="primary"  id="check-all" class="check-all" lay-filter="check-all">',
                    templet: function (d) {
                        var str = '';
                        if (!hasProtect(d)) {
                            str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="' + d.id + '" lay-filter="check-one" lay-event="chs">';
                        } else {
                            str += '<input type="checkbox" lay-skin="primary" class="check-one"  value="' + d.id + '" lay-filter="check-one" disabled lay-event="chs">';
                        }
                        return str;
                    }
                }, {
                    field: 'cptdate',
                    title: '存取时间',
                    align: 'center'
                }, {
                    field: 'cptname',
                    title: '资金名目',
                    align: "center"
                }, {
                    field: 'cptacount',
                    title: '金额',
                    align: 'center'
                }, {
                    field: 'typec',
                    title: '类型	',
                    align: 'center'
                }, {
                    field: 'cpttype',
                    title: '资金账户',
                    align: 'center'
                }, {
                    field: 'crer',
                    title: '填报人',
                    align: 'center',
                }, {
                    field: 'descb',
                    title: '备注描述',
                    align: 'center',
                }, {
                    title: '操作',
                    fixed: "right",
                    align: "center",
                    width: 300,
                    templet: function (d) {
                        var str = '';
                        if (d.flag == 1) {
                            str += '已入账';
                        } else {
                            str += '<a class="layui-btn layui-btn-xs" lay-event="cfm">确认入账</a>';
                            str += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>';
                        }
                        return str;
                    }
                }]];
            var pram = merger(constant.page.toUri(),
                getsearchVal());
            var form = layui.form, layer = parent.layer === undefined ? layui.layer
                : top.layer;
            var $ = layui.jquery;
            var laytpl = layui.laytpl;
            var table = layui.table;
            var naviObj;

            tableIns = table.render({
                elem: '#list',
                cellMinWidth: constant.table.cellMinWidth,
                page: false,
                limit: 1000,
                height: "full-245",
                cols: cols,
                done: function (res, page, count) {
                    checkAll(form);
                }
            });

            //资金流水列表
            listLoad(pram);

            function listLoad(data) {
                loadAjax(listApi, "get", data, function (response) {
                    baseCallBack(response, function (response) {
                        tabDatas = response.data.datas

                        table.reload("list", {
                            data: tabDatas
                        })
                        //  reset 导航条
                        $("#allCount").html("合计" + tabDatas.length + "条");
                        $("#chsCount1").html('')
                        $("#chsCount2").html('')
                        $("#pre-btn").hide();
                        $("#next-btn").hide();
                        //清空收入和支出的缓存数组
                        incDatas.length = 0;
                        outDatas.length = 0;

                        console.log(response.data.navi)
                        if (response.data.navi) {
                            naviObj = response.data.navi
                            if (response.data.navi.pre) {
                                $("#pre-btn").show();
                            }
                            if (response.data.navi.next) {
                                $("#next-btn").show();
                            }
                            $("#cptMth").empty();
                            // 月份导航下拉框
                            $.each(response.data.navi.selectAll, (i, e) => {
                                if (response.data.navi.current == e) {
                                    $("<option selected>" + e + "</option>").appendTo($("#cptMth"));
                                } else {
                                    $("<option>" + e + "</option>").appendTo($("#cptMth"));
                                }
                            })
                        }
                        form.render();
                    });
                });
            }

            // 添加
            $(".insert-btn").click(function () {
                openAreaLayer("添加记账流水", toInsertHtml, "480px", "460px", true);
            });
            // 搜索【此功能需要后台配合，所以暂时没有动态效果演示】
            $(".pre-btn").on("click", function () {
                listLoad({mth: naviObj.pre});
            });
            $(".next-btn").on("click", function () {
                listLoad({mth: naviObj.next});
            });
            // layUI处理change事件不生效
            form.on('select(cptMth)', function (data) {
                listLoad({mth: $("#cptMth").val()})
            });
            form.on('select(chgCp)', function (data) {
                if ($("#chgCp").val() == 0) {
                    table.reload("list", {data: tabDatas})
                    $("#allCount").html("合计" + tabDatas.length + "条");
                } else if ($("#chgCp").val() == 1) {
                    if (incDatas.length == 0) {
                        // 数组的过滤方法  ，对比下面的循环写法
                        incDatas = tabDatas.filter(e => e.cptacount > 0);
                    }
                    table.reload("list", {data: incDatas})
                    $("#allCount").html("合计" + incDatas.length + "条");
                } else if ($("#chgCp").val() == -1) {
                    if (outDatas.length == 0) {
                        $.each(tabDatas, function (i, v) {
                            if (v.cptacount < 0) {
                                outDatas.push(v)
                            }
                        })
                    }
                    table.reload("list", {data: outDatas})
                    $("#allCount").html("合计" + outDatas.length + "条");
                }
            });
            //对账计算
            $(".hidden-btn").click(
                function () {
                    var ids = getCheckedId();
                    if (ids && ids.length) {
                        countDatas = tabDatas.filter((e) => {
                            //截断：全选选中时会把下面的全部加一遍
                            if ($("#chgCp").val() == 0 && ids.length > tabDatas.length) {
                                ids = ids.slice(tabDatas.length, ids.length)
                            } else if ($("#chgCp").val() > 0 && ids.length > incDatas.length) {
                                ids = ids.slice(incDatas.length, ids.length)
                            } else if ($("#chgCp").val() < 0 && ids.length > outDatas.length) {
                                ids = ids.slice(outDatas.length, ids.length)
                            }

                            for (var i in ids) {
                                if (ids[i] == e.id) {
                                    return true;
                                }
                            }
                            return false;
                        });
                        cntRow = 0;
                        sumRow = 0;
                        $.each(countDatas, (i, v) => {
                            cntRow += 1;
                            sumRow += v.cptacount
                        })
                        $("#chsCount1").html(sumRow.toFixed(2))
                        $("#chsCount2").html('选中' + cntRow.toFixed(0) + '条')
                    } else {
                        $("#chsCount1").html('')
                        $("#chsCount2").html('')
                    }
                });

            //列表操作
            table.on('tool(list)',
                function (obj) {
                    var layEvent = obj.event;
                    var data = obj.data;
                    if (layEvent === 'cfm') {

                        if (data.typec == "应收款项") {
                            layer.open({
                                icon: 3,
                                title: '提示信息',
                                content: '确定入账？应收时间：<input id="ys" ' +
                                    'type="date" class="layui-input searchVal" placeholder="">'
                                , btn: ['确定', '取消']
                                , yes: function (index, layero) {
                                    var needrecDate = layero.children(".layui-layer-content").children(".layui-input").val();
                                    loadAjax(cfmApi + "/" + data.id + "?needrecDate=" + needrecDate, "get", null, function (response) {

                                        baseCallBack(response, function (response) {
                                            layer.msg(response.msg);
                                            listLoad(pram);
                                            confirm.close(index);
                                        });
                                    });
                                }
                            });
                        } else {
                            // 确认入账操作
                            confirmLayer(
                                '提示信息',
                                '确定入账？',
                                function (confirm, index) {
                                    loadAjax(cfmApi + "/" + data.id, "get", null, function (response) {
                                        baseCallBack(response, function (response) {
                                            layer.msg(response.msg);
                                            listLoad(pram);
                                            confirm.close(index);
                                        });
                                    });
                                })
                        }


                    } else if (layEvent === 'del') {
                        //删除
                        confirmLayer(
                            '提示信息',
                            '确定删除？',
                            function (confirm,
                                      index) {
                                loadAjax(deleteApi + "/" + data.id, "delete", null, function (response) {
                                    baseCallBack(response, function (response) {
                                        layer.msg(response.msg);
                                        listLoad(pram);
                                        confirm.close(index);
                                    });
                                });
                            })
                    }
                });
        })
</script>
</body>
</html>